<template>
  <el-table 
    style="width: 100%"
    :data="tableData" 
    :row-style="tableRowStyle"
    :header-cell-style="tableHeaderCellStyle"
    :row-key="tableRowKey"
    :stripe="stripe"
    :empty-text="emptyText"
    :scrollbar-always-on="scrollbarAlwaysOn"
  >
    <slot />
    <template #empty >
      <ComEmpty />
    </template>
  </el-table>
</template>

<script setup>
import {ref, watch, computed} from 'vue'
import useConfigStore from '@/store/config'

// eslint-disable-next-line no-undef
const props = defineProps({
  theme: {
    type: String,
    default: 'default'
  },
  headerCellStyle: {
    type: [Function, Object],
    default: () => ({
      color: '#000',
      background: '#fafafa'
    })
  },
  tableRowStyle: {
    type: [Function, Object],
    default: () => ({height:'80px'})
  },
  tableRowKey: {
    type: [Function, String],
    default: ''
  },
  tableData: {
    type: Array,
    default: () => []
  },
  stripe: {
    type: Boolean,
    default: false
  },
  scrollbarAlwaysOn: {
    type: Boolean,
    default: false
  },
  emptyText: {
    type: String,
    default: '暂无数据'
  }
})

const configStore = useConfigStore()

const tableHeaderCellStyle = ref('')

const theme = computed(() => configStore.theme)

watch(theme, newVal => {
  const style = {
    color: newVal === 'dark' ? '#a3a6ad' : '#000',
    background: newVal === 'dark' ? '#141414' : '#fafafa'
  }
  tableHeaderCellStyle.value = Object.assign({}, props.headerCellStyle, style)
}, {immediate: true})
</script>